$em_size = 20px
$em_size_small = 14px
$em_size_large = 36px

.axis
	.domain
		display none
	.tick
		font-family $qz-sans-light
		&[data-anchor="middle"]
			text
				text-anchor middle
		text
			fill $qz-chart-axis-text
			shape-rendering crispEdges
			text-anchor middle
		&:first-child
			text
				text-anchor middle
		line
			fill none
			stroke $qz-chart-gridline
			stroke-width 1px
			shape-rendering crispEdges
		&.zero
			line
				stroke $qz-chart-zeroline
		rect
			fill $qz-background-gray
			shape-rendering crispEdges

	&.leftAxis
		text
			text-anchor start

	&.rightAxis
		text
			text-anchor end
	&[data-scale="time"]
		.tick:not([data-anchor="middle"])
			text
				text-anchor start
			.tick:first-child
				text
					text-anchor start

.concealer-label
	font-family $qz-sans-light
	text
		fill $qz-chart-axis-text
	rect
		fill $qz-background-gray

.connectors line
	fill none
	stroke-width 1px

line.zero
	stroke $qz-chart-zeroline
	shape-rendering crispEdges

.qz-chart
	&.line
		path
			fill none
			stroke-width 3px
			stroke-linecap round
			stroke-linejoin round
	&.label
		font-family $qz-sans-light

.column-label
	fill $qz-chart-axis-text

line.no-label-tick
	fill none
	stroke $qz-chart-gridline
	stroke-width 1px
	shape-rendering crispEdges

.qz-chart
	&.medium
		font-size $em_size
		.line
			path
				stroke-width 3px

	&.small
		font-size $em_size_small
		.line
			path
				stroke-width 2px

	&.large
		font-size $em_size
		.line
			path
				stroke-width 4px
